<template>
  <el-dialog :model-value="visible" width="600" @close="cls">
    <el-form
      :model="detailed"
      style="max-width: 800px; margin-top: 20px"
      label-width="150px"
    >
      <el-form-item label="账号:">
        <el-input
          v-model="detailed.account"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="密码:">
        <el-input
          v-model="detailed.password"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
          type="password"
        />
      </el-form-item>
      <el-form-item label="货代公司名称:">
        <el-input
          v-model="detailed.companyName"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="联系人:">
        <el-input
          v-model="detailed.name"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input
          v-model="detailed.mobile"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input
          v-model="detailed.email"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="运输方式:">
        <el-select
          v-model="detailed.shippingid"
          placeholder="海运/铁路/公路/空运/多联式/散货"
          style="width: 300px"
        >
          <el-option
            v-for="item in shippings"
            :key="item.id"
            :label="item.shipping"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="航线选择:">
        <el-select
          v-model="detailed.routeid"
          placeholder="请选择"
          style="width: 300px"
        >
          <el-option
            v-for="item in routes"
            :key="item.id"
            :label="item.route"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="save"> 提交 </el-button>
      <el-button @click="cls">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { addSupply } from "@/api/system/forw.js";
import { getShipping, getRoute } from "@/api/forworder/clause.js";
//声明事件
const emits = defineEmits(["close", "refresh"]);
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
let shippings = ref([]);
let routes = ref([]);
const detailed = ref({
  account: "",
  password: "",
  companyName: "",
  name: "",
  mobile: "",
  email: "",
  shippingid: "",
  routeid: ""
});
//方法
function cls() {
  detailed.value = {
    account: "",
    password: "",
    companyName: "",
    name: "",
    mobile: "",
    email: "",
    shippingid: "",
    routeid: ""
  };
  //通知父组件  我要关闭了
  emits("close");
}
async function save() {
  let res = await addSupply(detailed.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件刷新数据
    emits("refresh");
    cls();
  } else {
    ElMessage({
      message: "保存失败",
      type: "error"
    });
  }
}
/**
 * 获取运输方式
 */
async function getShippingList() {
  let res = await getShipping();
  if (res.code === 200) {
    shippings.value = res.data; // 直接赋值为 res.data
  } else {
    console.error("获取数据失败:", res.msg);
  }
}
/**
 * 获取航线
 */
async function getRouteList() {
  let res = await getRoute();
  if (res.code === 200) {
    routes.value = res.data; // 直接赋值为 res.data
  } else {
    console.error("获取数据失败:", res.msg);
  }
}
// 初始化加载列表
onBeforeMount(() => {
  getShippingList();
  getRouteList();
});
</script>

<style scoped>
.dialog-footer {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
